<template>
  <div class="container">
    <van-nav-bar
      class="app-nav-bar"
      title="出校二维码"
      left-arrow
      @click-left="$router.back()"
    />
    <div id="qrcode" ref="qrcode" class="qr"></div>
    <!-- <h1 class="faceCode-shade pa"  v-if="isTimeout">
      <p>二维码已失效</p>
      <a @click="refresh()">刷新</a>
    </h1> -->
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
      qrcode: null,
      // time_stamp: null
      timer: null,
      isTimeout: false
    }
  },
  computed: {},
  watch: {},
  created () {},
  destroyed () {
    clearInterval(this.timer)
  },
  mounted () {
    this.creatQrCode()
    this.start()
  },
  methods: {
    creatQrCode () { // http://code.ciaoca.com/javascript/qrcode/
      // this.$refs.qrcode.innerHTML = '' // 清除二维码方法一
      // this.time_stamp = new Date().getTime() // 获取当前时间戳
      const text = 'xxxx'
      this.qrcode = new QRCode(this.$refs.qrcode, {
        text: text, // 页面地址 ,如果页面需要参数传递请注意哈希模式# // 需要转换为二维码的内容
        width: 100,
        height: 100,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
      // this.qrcode.clear() // 清除二维码方法二
      this.qrcode.makeCode('允许出校')
    },
    start () {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      } else {
        this.timer = setInterval(() => {
          console.log('10秒定时器')
          this.qrcode.clear()
          this.qrcode.makeCode('未经允许或二维码过期')
          // const obj = { text: '签到失败' } // 二维码携带的数据
          // this.qrcode.makeCode(JSON.stringify(obj.text))
        }, 10000)
      }
    }
    // // 定时器
    // setTimer () {
    //   this.timer = setInterval(() => {
    //     this.getAppScanResult()
    //   }, 2000)
    // },
    // // 刷新二维码重新获取
    // refresh () {
    //   this.qrcode.clear() // 把之前的置为空
    //   this.getFaceSnap()
    // },
    // getFaceSnap () {
    //   this.isTimeout = false
    //   const params = {}
    //   this.$axios.get('/vueapi/getUserAuthQrCode', params, (res) => {
    //     if (res.code === 0) {
    //       this.dialogVisible = true// 弹窗弹出
    //       this.token = res.data.token
    //       this.appScanResultData = res.data
    //       this.creatQrCode(res.data.qrCodeUrl)// 二维码
    //       this.setTimer()// 开启定时任务
    //     }
    //   })
    // }
    // 查询二维码状态
    // getAppScanResult () {
    //   const that = this
    //   const param = {}
    //   param.token = this.token
    //   param.trainplanId = this.trainplanId
    //   $.ajax({
    //     url: process.env.RX_URL + '/vueapi/user/getAppScanResult',
    //     type: 'GET',
    //     async: false,
    //     data: param,
    //     timeout: 5000,
    //     dataType: 'json',
    //     success: function (data, textStatus, jqXHR) {
    //       if (data.code == '0') {
    //         that.appScanResultData = data.data
    //         if (data.data.scanStatus == '2') {
    //           clearInterval(that.timer)// 扫码成功后清空定时器
    //           setTimeout(() => {
    //             that.dialogVisible = false
    //             var frame = document.getElementById('iframe')
    //             frame.contentWindow.postMessage('play', '*')
    //           }, 1000)
    //         }
    //       } else {
    //         clearInterval(that.timer)// 扫码超时后清空定时器
    //         that.isTimeout = true// 出现刷新的遮罩
    //       }
    //     },
    //     error: function (xhr, textStatus) {}
    //   })
    // }
  }
}
</script>

<style scoped lang="scss">
.qr {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
</style>
